<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>SVG介绍文档： https://cloud.tencent.com/developer/section/1424047</p>
    <p>
      MDN以及其内部元素标签文档：
      https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element
    </p>
    <div>
      <p>1.网络SVG资源 IRI_s： http://example.com/someDrawing.svg</p>
      <p>
        1.网络SVG资源后缀# 用于SVG内部的某一个元素id：
        http://example.com/someDrawing.svg#Lampost
      </p>
    </div>

    <svg
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <style>
        .classA {
          fill: red;
        }
      </style>
      <defs>
        <g id="Port">
          <circle style="fill: inherit" r="10" />
        </g>
      </defs>

      <text y="15">black</text>
      <use x="50" y="10" xlink:href="#Port" />
      <text y="35">red</text>
      <use x="60" y="30" xlink:href="#Port" class="classA" />
      <text y="55">blue</text>
      <use x="70" y="50" xlink:href="#Port" style="fill: blue" />
    </svg>

    <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
      <a xlink:href="https://developer.mozilla.org/">
        <text x="10" y="25">MDN Web Docs</text>
      </a>
    </svg>
  </body>
</html>
